<template>
	<view>
		<view class="title">
			<view class="left">新建巡检信息</view>
			<view class="right">
				<view class="scan" @click="goScan">
					<image src="/fireGridCheck/static/s.png" mode=""></image>
				</view>
				<text style="color: #3080FB;" @click="goScan">扫码直接获取相关信息</text>
			</view>
		</view>
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required label="检查点类型" name="检查点类型">
				<view :class="label == '请选择检查点类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker"  @click="handleTap('picker')" @input="binddata('检查点类型',$event)" mode="selector" :list="pointTypeList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
				<!-- <input maxlength="50" placeholder="请输入设施类型" v-model='resident.name' @input="binddata('name',$event.detail.value)"> -->
			</uni-forms-item>
			<uni-forms-item required label="检查点名称：" name="检查点名称">
				<view :class="label1 == '请选择检查点名称' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
				<lb-picker ref="picker1"  @click="handleTap('picker1')" @input="binddata('检查点名称',$event)" mode="selector" :list="checkPointList" :dataset="{ name: 'label1' }"
				 @confirm="handleConfirm1" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="检查点地址：" name="地址">
				<input maxlength="18" v-model="params['地址']" placeholder="请输入检查点地址" @input="binddata('地址',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="巡检事项：" name="检查项ids">
				<view class="color"  @tap="toOpen">请选择巡检事项</view>
				<jpSelect ref="jpSelect" :list="configList" @checked="checked" :item="item" select="more" tite="请选择巡检事项"></jpSelect>
				<!-- <input maxlength="18" placeholder="请输入整改事项" @input="binddata('巡检事项',$event.detail.value)" > -->
			</uni-forms-item>
			<view class="check-wrap">
				<view class="item-wrap" v-for="(item, index) in value">{{'(' + (index+1) + ')'}}{{item}}</view>
			</view>
			
			<uni-forms-item label="设施检查类型：" name="设施检查">
				<view :class="{color: value1 === '请选择设施检查类型'}" @tap="toOpen1">{{value1}}</view>
				<jpSelect ref="jpSelect1" :list="facilityTypeList" @checked="checked1" :item="item1" select="more" tite="请选择设施检查类型"></jpSelect>
				<!-- <input maxlength="18" placeholder="请输入整改事项" @input="binddata('设施检查类型',$event.detail.value)" > -->
			</uni-forms-item>
			<uni-forms-item label="备注信息：" name="备注">
				<input maxlength="18" v-model="params['备注']" placeholder="请输入备注信息" @input="binddata('location',$event.detail.value)" >
			</uni-forms-item>	
		</uni-forms>
		<button class="btn check-btn" @click="submitForm">提交</button>
	</view>
</template>

<script>
	import LbPicker from '../components/lb-picker/index.vue'
	import jpSelect from '../components/jp-select/jp-select.vue';
	export default {
		components: {
			LbPicker,
			jpSelect
		},
		data() {
			return {
				facilityType: this.$type.facilityType,
				label: '请选择检查点类型',
				label1: '请选择检查点名称',
				value: '',
				value1: '请选择设施检查类型',
				item: '',
				item1: '',
				installTypeList: this.$type.installTypeList,
				pointTypeList: this.$type.pointTypeList,
				checkPointList: [],
				// facilityTypeList: this.$type.facilityTypeList,
				checkPointType: this.$type.checkPointType,
				configList: null,
				facilityTypeList: [],
				params: {
					检查点id: null,
					检查项ids: null,
					检查点类型: null,
					检查点名称: null,
					设施检查: null,
					地址: null,
					备注: null
				},
				params1: {
					所属网格id: null,
					检查点类型: null,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					检查点类型: null
				},
				params3: {
					检查点id: null
				},
				//表单验证规则
				rules: {
					检查点类型: {
						rules: [{
							required: true,
							errorMessage: '请选择检查点类型',
						}]
					},
					检查点名称: {
						rules: [{
							required: true,
							errorMessage: '请选择检查点名称',
						}]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请填写检查点地址',
						}]
					},
					检查项ids: {
						rules: [{
							required: true,
							errorMessage: '请选择巡检事项',
						}]
					}
					// 设施检查: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择设施检查类型',
					// 	}]
					// }
				}
			}
		},
		onLoad() {
			this.params1.所属网格id = uni.getStorageSync('gridInfo').所属网格id
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			validate(params) {
				this.binddata('检查点类型', this.label)
				this.binddata('检查点名称', this.label1)
				this.binddata('地址', params)
			},
			checked(el) {
				this.item = el
				// this.value = el.map(item => item.name).join()
				this.value = el.map(item => item.name)
				this.params.检查项ids = el.map(item => item.id)
				this.binddata('检查项ids', this.params.检查项ids)
				console.log(this.params.检查项ids)
			},
			toOpen() {
				if(!this.configList) {
					uni.showToast({
						title: '请先填写检查点相关信息',
						icon: 'none'
					})
					return
				}
				if(this.configList.length == 0) {
					uni.showToast({
						title: '当前无可选的巡检事项',
						icon: 'none'
					})
					return 
				}
				this.$refs.jpSelect.toOpen()
			},
			toOpen1() {
				if(this.facilityTypeList.length == 0) {
					uni.showToast({
						title: '当前无可选的设施检查类型',
						icon: 'none'
					})
					return 
				}
				this.$refs.jpSelect1.toOpen()
			},
			checked1(el) {
				this.item1 = el
				this.value1 = el.map(item => item.name).join()
				this.params.设施检查 = el.map(item => item.value)
				// this.binddata('设施检查', this.params.设施检查)
				console.log(el)
				console.log(this.params.设施检查)
			},
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			goScan() {
				this.$common.scanCode(this.getCheckPointInfo)
			},
			getCheckPointInfo(id) {
				uni.showLoading({
					mask: true
				})
				this.params.检查点id = id
				this.$http.post('gridSystem/checkPoint/info', {id}).then(res => {
					console.log(res)
					if(res.code === 10000){
						// this.params = res.data
						this.label = this.checkPointType[res.data.检查点类型]
						this.params.检查点类型 = res.data.检查点类型
						this.params2.检查点类型 = res.data.检查点类型
						this.params1.检查点类型 = res.data.检查点类型
						this.getCheckPointList()
						this.getCheckConfig()
						this.getInstallList()
						if(res.data.检查点类型 == 'company') {
							this.label1 = res.data.公司.企业名称
							this.params.检查点名称 = res.data.公司.企业名称
							this.validate(res.data.公司.地址)
							this.params.地址 = res.data.公司.地址
						}else if(res.data.检查点类型 == 'residential') {
							this.label1 = res.data.高层住宅小区.小区名称
							this.params.检查点名称 = res.data.高层住宅小区.小区名称
							this.params.地址 = res.data.高层住宅小区.地址
							this.validate(res.data.高层住宅小区.地址)
						}else if(res.data.检查点类型 == 'shop') {
							this.label1 = res.data.商铺.商铺名称
							this.params.检查点名称 = res.data.商铺.商铺名称
							this.params.地址 = res.data.商铺.地址
							this.validate(res.data.商铺.地址)
						}else if(res.data.检查点类型 == 'clinic') {
							this.label1 = res.data.个体诊所.诊所名称
							this.params.检查点名称 = res.data.个体诊所.诊所名称
							this.params.地址 = res.data.个体诊所.地址
							this.validate(res.data.个体诊所.地址)
						}else if(res.data.检查点类型 == 'restaurant') {
							this.label1 = res.data.小餐饮店.餐饮店名称
							this.params.检查点名称 = res.data.小餐饮店.餐饮店名称
							this.params.地址 = res.data.小餐饮店.地址
							this.validate(res.data.小餐饮店.地址)
						}else if(res.data.检查点类型 == 'room') {
							this.$http.post('gridSystem/room/info', {房屋id: res.data.房屋.房屋id}).then(res => {
								if(res.code === 10000) {
									this.label1 = res.data.房屋名称
									this.params.检查点名称 = res.data.房屋名称
									this.params.地址 = res.data.房屋名称
									this.validate(res.data.房屋名称)
								}
							})
						}
					}
				})
			},
			getInstallList() {
				this.params3.检查点id = this.params.检查点id
				this.$http.post('gridSystem/device/listWithoutAuth', this.params3).then(res => {
					console.log(res)
					if(res.code === 10000){
						// this.installList = res.data.list
						if(res.data.list !== null) {
							let installType = res.data.list.map(item => item['设施类型'])
							let typeList = [...new Set(installType)]
							typeList.forEach((item, index) => {
								this.facilityTypeList.push({
									id: index,
									name: this.facilityType[item],
									value: item
								})
							})
							console.log(this.facilityTypeList)
						}
						if(res.data.list !== null) {
							
						}
					}
				})
			},
			getCheckPointList() {
				// this.checkPointList = []
				this.$http.post('gridSystem/checkPoint/list', this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(res.data.list !== null) {
							res.data.list.forEach(item =>{
								item.value = item.检查点名称
								item.label = item.检查点名称
							})
							this.checkPointList = [...this.checkPointList, ...res.data.list]
							if(res.data.list) {
								this.params1.pagination.current++
								this.getCheckPointList()
							}
						}
					}
				})
			},
			getCheckConfig() {
				this.$http.post('gridSystem/checkPoint/configList', this.params2).then(res => {
					console.log(res)
					if(res.data.list !== null) {
						res.data.list.forEach(item => {
							item.name = item.检查项描述
						})
					}
					this.configList = res.data.list || []
					
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.检查点类型 = e.item.label
					this.params1.检查点类型 = e.item.id
					this.params2.检查点类型 = e.item.id
					this.label1 = '请选择检查点名称'
					this.params['地址'] = ''
					this.value = ''
					this.item = ''
					this.params.检查项ids = null
					this.params.检查点名称 = ''
					this.checkPointList = []
					this.getCheckPointList()
					this.getCheckConfig()
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			handleConfirm1(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.检查点名称 = e.item.label
					this.params.检查点id = e.item.id
					this.params.地址 = e.item.地址
					this.getInstallList()
					this.binddata('地址', e.item.地址)
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log('表单数据信息：', res);
					console.log(this.params)
					this.addCheck(this.params)
					// this.resident.roomIds = [this.resident.roomIds]
				}).catch(err => {
					console.log(this.params)
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			addCheck(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/inspection/add', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.redirectTo({
							url: '/fireGridCheck/acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回首页'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.check-wrap {
		padding: 0 36rpx;
		.item-wrap {
			margin-bottom: 10rpx;
		}
	}
	.title {
		display: flex;
		height: 100rpx;
		padding: 0 20rpx;
		justify-content: space-between;
		align-items: center;
		.left {
			color: #333;
			font-size: 32rpx;
			&:before {
				content: '';
				position: absolute;
				top: 34rpx;
				left: 10rpx;
				width: 6rpx;
				height: 34rpx;
				background-color: #5094FF;
			}
		}
		.scan {
			width: 34rpx;
			height: 30rpx;
			margin-right: 12rpx;
			margin-top: 2rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.right {
			display: flex;
			//vertical-align: middle;
			// align-items: center;
		}
	}
	.check-btn {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		color: #fff;
		background-color: #3080FB;
	}
	// .btn {
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	right: 0;
	// 	color: #fff;
	// 	background-color: #3080FB;
	// }
</style>
